<template>
  <div >
        <!-- <h3>当前的值为:{{$store.state.app.countNumber}}</h3> -->
         <h3>当前的值为:{{countNumber}}</h3>
        <button @click="handCount">点击加1</button>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import { mapMutations } from 'vuex'
export default {
 
  data() {
    return {
       
    }
  },
  //将全局数据 映射为当前组件的computed 计算属性
  // computed:{
  //    ...mapState(['countNumber'])
  // },
  computed: mapState({

    // 箭头函数可使代码更简练
    countNumber: state => state.app.countNumber,//在modules下面我们就用这种方法  在全局下面我们就用上面的方法
    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // // 为了能够使用 `this` 获取局部状态，必须使用常规函数
    // countPlusLocalState (state) {
    //   return state.count + this.localCount
    // }


  }),
  mounted(){
    // console.log(this.$store.state.app.countNumber)
      console.log('/////')
      console.log({mapState})
    /*
       组件访问state中的数据的方式
           1.this.$store.state.app.countNumber
           2.从vuex中按需导入 mapState  通过刚导入的mapState函数将当前组件需要的 全局数据 映射为当前组件的computed 计算属性
    */

  },
  methods: {
        /*
            Mutation 用于边更Store中的数据
        */
       /*
       触发mutations的方式
          1.this.$store.commit('app/ADDCOUNT',3)
          2.mapMutations  

       mutations 里面不能写异步的代码不然页面和state里面的变量值不一致了
       
       触发actins的方式
          1.this.$store.dispatch('app/changeAfdd',10)
          2.mapActions

        使用 getter 的第一种方式
        
          1.this.$store.getter.名称
          2.mapGetter

       */
      //   ...mapMutations([
      //     //'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
      //     // `mapMutations` 也支持载荷：
      //     'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
      //  ]),

        // ...mapMutations({
        //    ADDCOUNT: mutations => mutations.app.ADDCOUNT,//在modules下面我们就用这种方法  在全局下面我们就用上面的方法
        // }),

       handCount(){
         //点击赋值加上去  commit的作用就是触发这个Mutation  dispatch的作用是触发某个actions
        //  this.$store.commit('app/ADDCOUNT',3)

        // this.ADDCOUNT(4)
        this.$store.dispatch('app/changeAfdd',10)

       }




  }
}
</script>

<style lang="scss" >

</style>
